// // import '@wangeditor/editor/dist/css/style.css' // 引入 css
// // import Vditor from 'vditor'
// import React, { useState, useEffect, useRef, useContext } from 'react'
// // import { Editor, Toolbar } from '@wangeditor/editor-for-react'
// // import { IDomEditor, IEditorConfig } from '@wangeditor/editor'
// import Bread from '@/component/bread/bread'
// import HeaderForm from './headerForm'
// import { BlogContext } from '@/pages/blog/blog'
// // import 'vditor/dist/index.css'
// import { Select } from 'antd'
// const { Option } = Select
// const Write: React.FC = () => {
//   // const [editor, setEditor] = useState<IDomEditor | null>(null) // 存储 editor 实例
//   const [html, setHtml] = useState<string>('') // 编辑器内容
//   const [text, setText] = useState<string>('') // 编辑器文本
//   const bread = ['博客', '博客写作']
//   const toolbarConfig = {}
//   // const editorConfig: Partial<IEditorConfig> = {
//   //   placeholder: '请输入内容...'
//   // }
//   const blogInfo = useContext(BlogContext)
//   // 及时销毁 editor ，重要！
//   // useEffect(() => {
//   //   return () => {
//   //     if (editor == null) return
//   //     editor.destroy()
//   //     setEditor(null)
//   //   }
//   // }, [editor])
//   // const changeEdit = (e: IDomEditor) => {
//   //   setHtml(e.getHtml())
//   //   setText(e.getText())
//   // }
//   useEffect(() => {
//     initWrite()
//     console.log(blogInfo)
//   }, [blogInfo])
//   const initWrite = () => {
//     if (!blogInfo) return
//     const { title, way } = blogInfo
//     setHtml(blogInfo.content)
//     headerFormDom.current!.onFill(title, way)
//   }
//   const [editType, setEditType] = useState<'markdown' | 'rich'>('markdown')
//   const handleChange = (value: 'markdown' | 'rich') => {
//     setEditType(value)
//   }
//   const headerFormDom = useRef<{ onFill: (title: string, way: string) => void }>(null)
//   // useEffect(() => {
//   //   const vditor = new Vditor('vditor', {
//   //     mode: 'sv',
//   //     height: '500px',
//   //     preview: {
//   //       delay: 0,
//   //       hljs: {
//   //         lineNumber: true
//   //       }
//   //     },
//   //     blur: () => {
//   //       setHtml(vditor.getHTML())
//   //       setText(vditor.getValue())
//   //   })
//   // }, [])
//   return (
//     <>
//       <Bread bread={bread}></Bread>
//       <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between' }}>
//         <HeaderForm ref={headerFormDom} text={text} html={html}></HeaderForm>

//         <div>
//           编辑器:
//           <Select defaultValue="markdown" style={{ width: 160, marginLeft: '16px' }} onChange={handleChange}>
//             <Option value="markdown">markdown编辑器</Option>
//             <Option value="rich">富文本编辑器</Option>
//           </Select>
//         </div>
//       </div>
//       {/* <div style={{ display: editType === 'markdown' ? 'block' : 'none' }}>
//         <div id="vditor"></div>
//       </div> */}
//       <div style={{ display: editType === 'rich' ? 'block' : 'none', border: '1px solid #ccc', zIndex: 100 }}>
//         {/* <Toolbar editor={editor} defaultConfig={toolbarConfig} mode="default" style={{ borderBottom: '1px solid #ccc' }} />
//         <Editor
//           defaultConfig={editorConfig}
//           value={html}
//           onCreated={setEditor}
//           onChange={editor => changeEdit(editor)}
//           mode="default"
//           style={{ height: '440px' }}
//         /> */}
//       </div>
//     </>
//   )
// }

// export default Write
